<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    	.top{
		    height: 40px;
		    border:1px solid black;
			}
			.top .center .search{
				width: 270px;
				border-radius: 10px;
				border:1px solid #CCCCCC;
				margin-top: 5px;
			}
    	.header{
    		background-color: cornflowerblue;
    		padding: 5px;
    		text-align: center;
    	}
    	.header .input-hd{
    		padding-right: 0;
    	}
    	.header .input-hd input{
    		border-radius: 20px;
    	}
    	.header i{
    		font-size: 20px;
    		color: #fff;
    		line-height: 34px;
    	}
    	.msg{
    		background-color: #CCCCCC;
    		color: #fff;
    		padding: 10px;
    	}
    	.menu{
    		text-align: center;
    	}
    	.menu > div{
    		padding: 10px 0;
    	}
    	.item{
    		margin-bottom: 15px;
    	}
    	.item img{
    		width: 100%;
    	}
    	.item h2{
    		font-size: 16px;
    		border-left: 5px solid cornflowerblue;
    		padding-left: 10px;
    	}
    	.item p{
    		text-align: center;
    	}
    	.tubiao{
    		width: 18px;
    		height: 18px;
    	}
    	.col-xs-3>p{
    		padding-top:5px;
    	}
    	.col-xs-6{
    		
    	}
    	
    	.col-xs-6>p{
    		line-height: 15px;
    		margin-bottom: 4px;
    		text-align: left;
    		font-family: "微软雅黑";
    			width: 135px;
    	}
    	.col-xs-6>p:nth-of-type(1){
    		font-size: 12px;
    		margin-top: 10px;
    	}
    	.col-xs-6>p:nth-of-type(2){
    		
    		font-size: 8px;
    		color: #69696A;
    		line-height: 18px;
    		overflow: hidden;
    		text-overflow: ellipsis;
    		display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
    		
    	}
    	.col-xs-6>p:nth-of-type(3){
    		font-size: 12px;
    		color: #FB2842;
    		font-weight: bold;
    		
    	}
    	.col-xs-6>p:nth-of-type(3) span{
    			border-radius: 3px;
    		background-color: red;
    		color: white;
    		display: inline-block;
    		margin-left: 10px;
    		font-size: 8px;
    		font-weight: inherit;
    	}
    	.down{
			position:fixed; bottom:0px; left:0px; width:100%;
   			 background-color: #FFFFFF;
    		height: 60px;
   			 text-align: center;
		}

		.down-div{
			width: 500;
			text-align: center;
			height: 60px;
		}

		.down-span{
			margin: 20px auto;
			width: 70px;
			height: 60px;
			font-weight: 500;
			float: left;
			font-size: 18px;
		}
	.down-span img{
			text-align: center;
		}
	.item-jz{
		height: 100%;
		width: 100%;
		font-size: 16px;
	}
    </style>
  </head>
  <body>
  	<div class="container-fluid top">
		<div class="row">
			<div class="col-xs-1 text-right right">
				<svg t="1566384488965" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1313" width="25" height="35"><path d="M897.427256 249.003144 126.57172 249.003144c-34.673707 0-62.73174-28.088732-62.73174-62.73174s28.058033-62.73174 62.73174-62.73174l770.855536 0c34.673707 0 62.73174 28.088732 62.73174 62.73174S932.101987 249.003144 897.427256 249.003144z" p-id="1314" fill="#353535"></path><path d="M897.427256 574.73174 126.57172 574.73174c-34.673707 0-62.73174-28.088732-62.73174-62.73174s28.058033-62.73174 62.73174-62.73174l770.855536 0c34.673707 0 62.73174 28.088732 62.73174 62.73174S932.101987 574.73174 897.427256 574.73174z" p-id="1315" fill="#353535"></path><path d="M897.427256 900.460336 126.57172 900.460336c-34.673707 0-62.73174-28.088732-62.73174-62.73174 0-34.643008 28.058033-62.73174 62.73174-62.73174l770.855536 0c34.673707 0 62.73174 28.088732 62.73174 62.73174C960.16002 872.371604 932.101987 900.460336 897.427256 900.460336z" p-id="1316" fill="#353535"></path></svg>
			</div>
			<div class="col-xs-10 text-center center">
               <input type="text" class="search"/>
            </div>
            <div class="col-xs-0 text-left left">
            	<svg t="1566385850129" class="icon-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3026" width="25" height="35"><path d="M141.3 420.1V188.8l231.2-0.1 0.1 231.3-231.3 0.1z m231.3-308.4H141.2c-42.5 0.1-76.9 34.5-77 77v231.5c0.1 42.5 34.5 76.9 77 77h231.5c42.5-0.1 76.9-34.5 77-77V188.7c-0.2-42.5-34.6-76.9-77.1-77zM141.3 882.6V651.2l231.2-0.1 0.1 231.3-231.3 0.2z m231.3-308.4H141.2c-42.5 0.1-76.9 34.5-77 77v231.5c0.1 42.5 34.5 76.9 77 77h231.5c42.5-0.1 76.9-34.5 77-77V651.1c-0.2-42.4-34.6-76.8-77.1-76.9zM719.4 468L555.8 304.4l163.4-163.6 163.7 163.5L719.4 468z m218-218L773.7 86.4c-30.1-30-78.7-30-108.8 0L501.3 250a76.744 76.744 0 0 0-22.5 54.3c-0.1 20.5 8 40.1 22.5 54.6L665 522.6c30.1 30 78.8 30 108.8 0l163.7-163.7c29.9-30.2 29.9-78.9-0.1-108.9zM603.7 882.6V651.2l231.2-0.1 0.1 231.3-231.3 0.2z m231.4-308.4H603.6c-42.5 0.1-76.9 34.5-77 77v231.5c0.1 42.5 34.5 76.9 77 77h231.5c42.5-0.1 76.9-34.5 77-77V651.1c-0.1-42.4-34.6-76.8-77-76.9z" p-id="3027" fill="#353535"></path></svg>
			</div>
		</div>
    </div>

	<div>
		
	</div>
		<div id="carousel-example-generic" class="warp carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
			    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img src="img/scroll-01.jpg">
				</div>
				<div class="item">
					<img src="img/scroll-02.jpg">
				</div>
				<div class="item">
					<img src="img/scroll-03.jpg">
				</div>
			</div>
			<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
		</div>
	<p class="msg"><i class="glyphicon glyphicon-volume-up"></i>
		<span style="font-size: 13px;font-weight: bolder;color: #F0AD4E;">限时购</span>     <span style="font-size: 8px;color: #8C8C8C;">每天十点限时限量</span>
	</p>
	<div class="container-fluid">
		<div class="row menu">
			<div class="col-xs-3">
				<img src="img/yundong.png" class="tubiao" />
				<p>运动</p>
			</div>
			<div class="col-xs-3">
				<img src="img/caizhuang.png" class="tubiao"/>
				<p>彩妆</p>
			</div>
			<div class="col-xs-3">
				<img src="img/baojian.png" class="tubiao"/>
				<p>保健</p>
			</div>
			<div class="col-xs-3">
				<img src="img/gehu.png" class="tubiao"/>
				<p>个护</p>
			</div>
			<div class="col-xs-3">
				<img src="img/hufu.png" class="tubiao"/>
				<p>护肤</p>
			</div>
			<div class="col-xs-3">
				
				<img src="img/peishi.png" class="tubiao"/>
				<p>配饰</p>
			</div>
			<div class="col-xs-3">
				<svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 1024 1024" width="18" height="18" t="1566349734554" p-id="11575" version="1.1"><path fill="#b3b3b3" d="M 981.206 877.278 c 0 -3.05672 -9.17015 -64.191 -48.9075 -146.722 c -24.4537 -48.9075 -51.9642 -91.7015 -85.5881 -134.496 c -42.794 -48.9075 -91.7015 -94.7582 -146.722 -128.382 c -12.2269 -9.17015 -18.3403 -21.397 -27.5104 -33.6239 c -6.11343 -12.2269 -9.17015 -21.397 -9.17015 -33.6239 c -3.05672 -21.397 3.05672 -42.794 12.2269 -64.191 c 45.8507 -103.928 85.5881 -226.197 82.5313 -268.991 v -21.397 L 586.89 0 l -9.17015 21.397 c -9.17015 24.4537 -42.794 73.3612 -73.3612 76.4179 c -24.4537 0 -51.9642 -27.5104 -79.4746 -76.4179 l -12.2269 -21.397 l -168.119 48.9075 v 21.397 c 0 3.05672 3.05672 100.872 51.9642 207.857 c 21.397 48.9075 39.7373 85.5881 39.7373 122.269 c 0 24.4537 -3.05672 55.0209 -45.8507 100.872 c -18.3403 18.3403 -39.7373 36.6806 -61.1343 55.0209 c -39.7373 33.6239 -79.4746 67.2478 -116.155 116.155 C 73.3612 730.555 48.9075 794.746 39.7373 874.221 c 0 3.05672 0 27.5104 24.4537 48.9075 c 33.6239 33.6239 100.872 42.794 195.63 33.6239 c 30.5672 -3.05672 45.8507 3.05672 67.2478 15.2836 c 33.6239 15.2836 76.4179 39.7373 180.346 39.7373 c 85.5881 0 149.779 -48.9075 165.063 -61.1343 c 12.2269 -6.11343 67.2478 -24.4537 174.233 9.17015 c 39.7373 12.2269 67.2478 3.05672 85.5881 -6.11343 c 39.7373 -24.4537 45.8507 -73.3612 45.8507 -79.4746 v -3.05672 l 3.05672 6.11343 Z m 0 0" p-id="11576" /></svg>
				
				<p>服装</p>
			</div>
			<div class="col-xs-3">
				<img src="img/meishi.png" class="tubiao"/>
				<p>美食</p>
			</div>
		</div>

		
			<div class="item">
					<h2>推荐</h2>
				<div class="row">
					<div class="col-xs-6">
						<img src="img/kouho1.jpg" class="tupian"/>
						<p>法国·提升起色滋润保湿</p>
						<p style="font-size: 5px;">ROUGE PUR COUTURE圣罗兰纯口红红色是一种宣言，是存在的证明，是女性气质充满张力的演绎。</p>
						<P>￥179<span class="lijian">立减20</span></p>
					</div>
					<div class="col-xs-6">
						<img src="img/kouho2.jpg" class="tupian"/>
						<p>法国·提升起色滋润保湿</p>
						<p style="font-size: 5px;">ROUGE PUR COUTURE THE SLIM MATTE LIPSTICK圣罗兰细管纯口红</p>
						<P>￥179<span>立减20</span></p>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="row">
					<div class="col-xs-6">
						<img src="img/sanfen.jpg" class="tupian"/>
						<p>中国·立体高光粉饼盘</p>
						<p>Fenty BeautyFenty新品钻石高光diamond bomb做全村最闪亮的女孩！</p>
						<P>￥179<span>立减20</span></p>
					</div>
					<div class="col-xs-6">
					<img src="img/yanyin.jpg" class="tupian"/>
						<p>中国·网红裸色眼影盘</p>
						<p>UCANBE大理石眼影盘少女系珠光亚光ins细腻贴合眼部肌肤，妆容出色持久，渲染出挑风格~</p>
						<P>￥179<span>立减20</span></p>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="row">
					<div class="col-xs-6">
						<img src="img/baobao.jpg" class="tupian"/>
						<p>中国·百搭米白色水桶包</p>
						<p>JONBAG简·佰格 斜挎包女学生ins女包新款夏潮米白配卡其</p>
						<P>￥179<span>立减20</span></p>
					</div>
					<div class="col-xs-6">
						<img src="img/gaog.jpg" class="tupian"/>
						<p>美国·神仙高光星辰闪亮</p>
						<p>Fenty Beauty Diamond 钻石高光粉 网红高光粉哈雷娜同款</p>
						<P>￥179<span>立减20</span></p>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="row">
					<div class="col-xs-6">
						<img src="img/kouho3.jpg" class="tupian"/>
						<p>中国·李佳奇强烈推荐款</p>
						<p>Hold Live幽兰之情唇釉（六支礼盒装）</p>
						<P>￥179<span>立减20</span></p>
					</div>
					<div class="col-xs-6">
						<img src="img/yany1.jpg" class="tupian"/>
						<p>中国·平价少女</p>
						<p>JEANMISS 网红少女眼影盘沙漠玫瑰哑光珠光大地色初学者十八色眼影</p>
						<P>￥179<span>立减20</span></p>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="row">
					<div class="col-xs-6">
						<img src="img/baobao1.jpg" class="tupian"/>
						<p>中国·蓝白撞色水桶包</p>
						<p>JONBAG简·佰格 斜挎包女学生ins女包新款时尚手提包单肩斜挎大容量水桶包</p>
						<P>￥179<span>立减20</span></p>
					</div>
					<div class="col-xs-6">
					<img src="img/xiangshui.jpg" class="tupian"/>
						<p>中国·温婉柔和甜美果香</p>
						<p>完美日记perfect diary持久花果No1</p>
						<P>￥179<span>立减20</span></p>
					</div>
				</div>
			</div>
			<div class="down">
				<div class="down-div">
					<div class="down-span" id="s">首页</div>
					<div class="down-span" id="c">商城</div>
					<div class="down-span"><img src="img/plus-circle.png" width="40px" height="40px"/></div>
					<div class="down-span" id="x">消息</div>
					<div class="down-span" id="w">我</div>
				</div>
			</div>
		</div>

	</div>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#s").click(function(){
					window.location.href = "index.jsp";
				})
				$("#c").click(function(){
					window.location.href = "test_index.jsp";
				})
				$("#x").click(function(){
					window.location.href = "xinxi.jsp";
				})
				$("#w").click(function(){
					window.location.href = "wo.jsp";
				})
			})
		</script>
  </body>
</html>